<template>
  <div>
    <div class="page-content container">
      <div class="content-box">
        <div class="content-box-title">
          <i class="glyphicon glyphicon-play-circle"></i> 推荐歌单
        </div>
        <div class="content-box-data row">

          <div class="col-sm-3 data-item" v-for="item in list">
            <div class="card">
              <a href="#" class="img-box">
                <img :src="'/static/img/a1.jpg'" />
                <div class="play-num"><i class="glyphicon glyphicon-headphones"></i> {{item.playNum}} </div>
                <div class="play-btn"><i class="glyphicon glyphicon-play"></i></div>
              </a>
              <a href="#" :title="item.title" class="font-box">
                {{item.title}}
              </a>
              <div class="head-box">
                <a href="#" class="pull-left head-img">
                  <img :src="item.cover" width="40" height="40" class="img-circle" />
                </a>
                <div class="pull-left info">
                  <div class="nickname">
                    <a href="#">{{item.nickname}}</a>
                    <i class="glyphicon glyphicon-fire" style="color: red;"></i>
                  </div>
                  <span class="time">创建于 {{item.created_at}}</span>
                </div>
                
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="content-box">
        <div class="content-box-title">
          <i class="glyphicon glyphicon-play-circle"></i> 推荐新歌
        </div>
        <div class="content-box-data row">

          <div class="col-sm-3 data-item" v-for="item in list">
            <div class="card">
              <a href="#" class="img-box">
                <img :src="'/static/img/a1.jpg'" />
                <div class="play-num"><i class="glyphicon glyphicon-headphones"></i> {{item.playNum}} </div>
                <div class="play-btn"><i class="glyphicon glyphicon-play"></i></div>
              </a>
              <a href="#" :title="item.title" class="font-box">
                {{item.title}}
              </a>
              <div class="head-box">
                <a href="#" class="pull-left head-img">
                  <img :src="item.cover" width="40" height="40" class="img-circle" />
                </a>
                <div class="pull-left info">
                  <div class="nickname">
                    <a href="#">{{item.nickname}}</a>
                    <i class="glyphicon glyphicon-fire" style="color: red;"></i>
                  </div>
                  <span class="time">创建于 {{item.created_at}}</span>
                </div>
                
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
        {cover: '/static/img/a8.jpg', playNum: 258, title: '华语//你没有错 是不是我听错了', nickname: '灵魂歌唱家', created_at: '2016-12-24'},
        {cover: '/static/img/a7.jpg', playNum: 255, title: '华语//你没有错 是不是我听错了2', nickname: '灵魂歌唱家2', created_at: '2016-12-24'},
        {cover: '/static/img/a8.jpg', playNum: 258, title: '华语//你没有错 是不是我听错了', nickname: '灵魂歌唱家', created_at: '2016-12-24'},
        {cover: '/static/img/a7.jpg', playNum: 255, title: '华语//你没有错 是不是我听错了2', nickname: '灵魂歌唱家2', created_at: '2016-12-24'},
        {cover: '/static/img/a8.jpg', playNum: 258, title: '华语//你没有错 是不是我听错了', nickname: '灵魂歌唱家', created_at: '2016-12-24'},
        {cover: '/static/img/a7.jpg', playNum: 255, title: '华语//你没有错 是不是我听错了2', nickname: '灵魂歌唱家2', created_at: '2016-12-24'},
        {cover: '/static/img/a8.jpg', playNum: 258, title: '华语//你没有错 是不是我听错了', nickname: '灵魂歌唱家', created_at: '2016-12-24'},
        {cover: '/static/img/a7.jpg', playNum: 255, title: '华语//你没有错 是不是我听错了2', nickname: '灵魂歌唱家2', created_at: '2016-12-24'}
      ]
    }
  }
}
</script>
<style scoped>
</style>
